<template>
	<view>
		<!-- 原值 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">原值</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="original" id="original" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
		<!-- 净值 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">净值</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="worth" id="worth" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
		<!-- 成新率 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">成新率</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="newnessrate" id="newnessrate" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">混合图</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="quantity" id="quantity" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveMix"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this
	var Original = null
	var Worth = null
	var Newness = null
	var Netquantity = null

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				OriginalValueList: {
					series: [{
						"name": "其他设备",
						"data": 20
					}, {
						"name": "信息设备",
						"data": 45
					}, {
						"name": "医疗设备",
						"data": 1275
					}]
				},
				NetWorthList: {
					series: [{
						"name": "其他设备",
						"data": 20
					}, {
						"name": "信息设备",
						"data": 45
					}, {
						"name": "医疗设备",
						"data": 1275
					}]
				},
				NewnessRateList: {
					"categories": ["其他设备", "信息设备", "医疗设备"],
					"series": [{
						"name": "成新率",
						"data": [27, 35, 37]
					}, ]
				},
				QuantityList: {
					"categories": ["2020-07", "2020-08", "2020-09", "2020-10", "2020-11", "2020-12", "2021-01", "2021-02", "2021-03",
						"2021-04", "2021-05", "2021-06"
					],
					"series": [{
						"name": "柱1",
						"data": [40, 30, 55, 110, 24, 58, 36, 56, 32, 45, 68, 46],
						"type": "column"
					}, {
						"name": "折线",
						"data": [120, 140, 105, 170, 95, 160, 132, 162, 136, 142, 125, 136],
						"type": "line",
						"color": "#2fc25b"
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList()
		},
		methods: {
			refreshList() {
				_this.OriginalValue("original", this.OriginalValueList)
				_this.NetWorth("worth", this.NetWorthList)
				_this.NewnessRate("newnessrate", this.NewnessRateList)
				_this.NetQuantity("quantity", this.QuantityList)
			},
			// 原值
			OriginalValue(canvasId, chartData) {
				Original = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					}
				})
			},
			// 净值
			NetWorth(canvasId, chartData) {
				Worth = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					}
				})
			},
			// 成新率
			NewnessRate(canvasId, chartData) {
				Newness = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true, // 绘制Y坐标轴网格
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _this.cWidth * _this.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				})
			},
			// 数量净值
			NetQuantity(canvasId, chartData) {
				Netquantity = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: 'dash',
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						tooltip: {
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 8,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					}
				})
			},
			// 触摸
			touchColumn(e) {
				if (e.target.id === "original") {
					Original.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "worth") {
					Worth.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "newnessrate") {
					Newness.showToolTip(e, {
						format: function(item, category) {
							console.log(item)
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "quantity") {
					Netquantity.scrollStart(e)
					Netquantity.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					Netquantity.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					})
				}
			},
			moveMix(e) {
				Netquantity.scroll(e)
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
